<template>
      <el-table
        :data="data"
        border
        style="width: 100%; height: 100%; background-color: transparent; color: #fff"
      >
        <el-table-column v-for="(item,index) in eachData" :key="index" :prop="item.prop" :label="item.label" align="center" />
      </el-table>
</template>  
    
  <script setup>
import { ref,defineProps } from 'vue'
import {getStatStationDistance,getStatTrafficLine} from '../../../api/topic';
import {useMapStoreStore} from '../../../stores/index';
const store = useMapStoreStore();
const data = ref([]);

const props = defineProps({
  mimedata:{
    type:String,
    default:"zxz"
  }
})
const zxz = [
  {
    prop:"name",
    label:"中心站"
  },
  {
    prop:"distance",
    label:"震中距（公里）"
  }
]

const jt  = [
{
    prop:"traffcTypeName",
    label:"交通线"
  },
  {
    prop:"traffcName",
    label:"名称"
  },
  {
    prop:"distance",
    label:"震中距（公里）"
  }
]

const eachData = props.mimedata == "zxz" ? zxz : jt;

const initData = ()=>{
  if(props.mimedata == "zxz"){
    getStatStationDistance({eqid:store.eqid}).then(e=>{
    data.value = e;
    for (const item of data.value) {
      item.distance = item.distance  +"(公里)";
    }
   })
   return
  }
  getStatTrafficLine({eqid:store.eqid}).then(e=>{
    data.value = e;
    for (const item of data.value) {
      item.distance = item.distance  +"(公里)";
    }
  })

}
initData()

</script>  
    
  <style scoped>
.el-table {
  --el-table-border-color: #b9eeff;
  --el-table-tr-bg-color:transparent;
  --el-table-header-bg-color:transparent;
  --el-table-row-hover-bg-color:rgba(255, 255, 255, 0.1);
  --el-table-header-text-color: #ffffff;
}


</style>